<template>
  <div class="leftmenu">
    <el-menu
      :default-active="defaulpath"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="$store.state.isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <div class="logo">
        <el-avatar
          :src="require('@/assets/img/logo.png')"
          :size="50"
          fit="cover"
          :style="{ marginLeft: $store.state.isCollapse ? '5px' : '20px' }"
        ></el-avatar>
        <b v-if="!$store.state.isCollapse">许方言</b>
        <!-- <span style="margin-left: 10px">许方言</span> -->
      </div>
      <el-submenu index="goods">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item index="/index/goodmessage">{{
          titles[0].title
        }}</el-menu-item>
        <!-- <el-menu-item index="/index/Add">{{ titles[1].title }}</el-menu-item> -->
      </el-submenu>
      <el-submenu index="user">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span slot="title">用户管理</span>
        </template>
        <el-menu-item index="/index/manage">权限管理</el-menu-item>
      </el-submenu>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="/index/community">
        <i class="el-icon-chat-round"></i>
        <span slot="title">社区</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "leftmenu",
  data() {
    return {
      // isCollapse: true, //为true时，会收缩
      defaulpath: "",
      titles: [
        { title: "商品信息", id: 1 },
        { title: "增加商品", id: 2 },
        { title: "", id: 3 },
        { title: "社区", id: "4" },
      ],
    };
  },
  created() {
    console.log("左边");
    this.defaulpath = this.$route.path;
  },
  mounted() {
    //刷新后的控制台默认指示
    // setTimeout(() => {
    //   for (const item of this.$store.state.tags) {
    //     console.log(item);
    //     console.log(item.path.length);
    //     if (item.path != "") {
    //       //如果path不为空，则是默认的
    //       // console.log(item.id);
    //       this.defaulpath = item.path.slice(1);
    //       console.log(item.path.slice(1));
    //     }
    //   }
    // }, 300);
    // //给延时是因为当leftmenu被挂载的时候，
    // //可能tabcard进行的操作还没有完成
  },
  computed: {
    defaultActive() {},
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    itemselect(index, indexPath) {
      //点击子菜单时触发
      console.log(index, indexPath); //第一个值为el-submenu的index，第二值为其子组件的第几个
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      let id = 0;
      let title = "";
      switch (key) {
        case "/index/goodmessage":
          id = this.titles[0].id;
          title = this.titles[0].title;
          break;
        case "/index/Add":
          id = this.titles[1].id;
          title = this.titles[1].title;
          break;
        case "community":
          id = this.titles[3].id;
          title = this.titles[3].title;
      }
      const obj = {
        id,
        title,
        key,
      };
      console.log(obj);
      this.$store.commit("addtags", obj);
      this.$router.push(key);
    },
  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      this.defaulpath = to.path;
    },
  },
};
</script>

<style scoped>
.leftmenu {
  height: 100%;
  /* width: 100%; */
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-vertical-demo {
  height: 100%;
  border-right: 0px !important;
}
.logo {
  width: 100%;
  margin: 30px 0 auto;
  height: 60px;
  font-size: 13px;
  color: aliceblue;
  line-height: 60px;
  text-align: center;
  font-size: larger;
  display: flex;
}
.logo b {
  flex: 1;
}
</style>